<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <h2>测试ajax二合一封装</h2>
    <input type="text" id="username"><br>
    <input type="text" id="password"><br>
    <input type="button" value="登录" id="btn1">
    <input type="button" value="注册" id="btn2">
</body>
<script>

    const un = document.querySelector("#username");
    const pw = document.querySelector("#password");
    const login = document.querySelector("#btn1");
    const register = document.querySelector("#btn2");
    
    
    login.onclick = function(){
        let url = "http://10.11.60.96:3000/login";

        ajax({
            url,
            data: {
                username: un.value,
                password: pw.value
            },
            success: res => {
                console.log("get请求成功，数据为：", res)
            },
            error: code => {
                console.log("get请求失败，状态为：", code)
            },
            timeout: 13
        });

    }

    register.onclick = function(){
        let url = "http://10.11.60.96:3000/register";
        ajax({
            type: "post",
            url,
            data: {
                username: un.value,
                password: pw.value
            },
            success: res => {
                console.log("post请求成功，数据为：", res)
            }

        });
    }

    // function ajax(ops){}
    // function ajax(ops={}){}
    // function ajax(ops={}){
    //     const {url,data,timeout} = ops;
    // }
    // function ajax(ops={}){
    //     const {url="",data={},timeout=100} = ops
    // }
    // 1. 参数的处理（默认值）
    function ajax({url="",data={},timeout=50000,type="get",success, error}={}){
        // 2. 解析数据成：名=值&名=值
        let str = ""
        for(let i in data){
            str += `${i}=${data[i]}&`
        }
        str = str.slice(0,-1);
        
        // 2. 判断是否是get请求，决定是否要拼接url
        if(type.toLowerCase() === "get"){
            url += "?" + str;
        }

        // 3. 开启ajax请求
        const xhr = new XMLHttpRequest();
        // 5. 配置xhr的超时时间
        xhr.timeout = timeout;
        xhr.open(type, url, true);
        xhr.onload = function(){
            if(xhr.status === 200){
                success && success(xhr.responseText);
            }else{
                error && error(xhr.status);
            }
        }
        // 6. 绑定xhr的超时事件，触发超时事件时，返回错误
        xhr.ontimeout = function(){
            error && error("timeout");
            // 超时报错之后，不需要继续请求了
            // 执行终止xhr请求方法
            xhr.abort();
        }
        // 4. 判断请求方式，决定是否需要设置content-type，以及send时是否需要携带数据
        if(type.toLowerCase() === "get"){
            xhr.send();
        }else{
            xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
            xhr.send(str);
        }
    }

    
</script>
</html>